<div class="media-list-item episode-wrapper" ng-class="{'no-files': !episode.videoFiles.length, 'uploading': uploadStatus.percentage != null}"
     ngf-drop ngf-drag-over-class="dragover-upload" ngf-change="upload($files)"
     ng-if="!episode.deleted">

  <div class="upload-overlay" ng-class="{'visible': uploadStatus.percentage != null}">
    <span class="hint" ng-show="uploadStatus.percentage == null">Upload File</span>
    <span class="percentage" ng-show="uploadStatus.percentage != null && uploadStatus.percentage < 100">{{uploadStatus.percentage}} %</span>
    <span class="processing" ng-show="uploadStatus.percentage == 100">
      <span>
        <div class="spinner">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </span>
      <!--<span class="converting">Converting...</span>-->
    </span>
  </div>

  <span class="label label-danger pull-right" ng-show="!episode.videoFiles.length"><i class="ion-alert-circled"></i> No Video File yet!</span>
  <a ui-sref="admin.reports" class="label label-danger pull-right" ng-show="episode.videoFiles.length && episode.reportCount">
    <i class="ion-alert-circled"></i>
    <span ng-if="episode.reportCount == 1" >1 Report!</span>
    <span ng-if="episode.reportCount > 1" >{{episode.reportCount}} Reports!</span>
  </a>


  <h3 class="media-episode-string">
    <span ng-show="episode.episodeString">{{episode.episodeString}}</span>
    <span ng-show="!episode.episodeString">s{{episode.season_number | padnumber:2}}e{{episode.episode_number | padnumber:2}}</span>
  </h3>
  <h3 class="media-title">{{episode.name}}</h3>
  <div class="media-item" >
    <img ng-if="episode.still_path" ng-src="https://image.tmdb.org/t/p/w300/{{episode.still_path}}"/>
    <img ng-if="!episode.still_path && episode.still_image_src" ng-src="{{episode.still_image_src}}"/>
    <div ng-if="!episode.still_path && !episode.still_image_src" class="fallback-image"></div>

    <a ng-show="episode.videoFiles.length" ui-sref="player({videoId: episode.id})" class="play-icon ion-ios-play"></a>
  </div>

  <div class="button-wrapper">
    <button ng-click="editEpisode(episode)" class="btn btn-secondary btn-xs">Edit</button>
    <button class="btn btn-secondary btn-xs" ng-click="manageFiles(episode)">Manage Files</button>

      <!--<button class="btn btn-success btn-xs pull-right" ng-click="openFileBrowser()" ng-show="!episode.files.length">Browse for File</button>-->
  </div>


</div>
